<template>
  <view class="inventory-container">
    <!-- 库存记录列表 -->
    <view class="inventory-list">
      <view v-if="Object.keys(groupedRecords).length === 0" class="no-records">
        暂无入库记录
      </view>
      <view v-else>
        <view v-for="(records, supplierName) in groupedRecords" :key="supplierName" class="supplier-group">
          <view class="supplier-header" @click="toggleSupplier(supplierName)">
            <view class="supplier-name">{{ supplierName }}</view>
            <view class="toggle-icon">{{ isOpen[supplierName] ? '-' : '+' }}</view>
          </view>
          <view v-if="isOpen[supplierName]" class="supplier-records">
            <view class="supplier-records-inner">
              <view v-for="record in records" :key="record.id" class="inventory-item">
                <view class="item-header">
                  <view class="warehouse-name">{{ record.goodsName }}</view>
                </view>
                <view class="item-body">
                  <view class="quantity">数量: {{ record.quantity }}</view>
                  <view class="operator">操作人: {{ record.operatorName }}</view>
                  <view class="create-time">创建时间: {{ record.createTime }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inventoryRecords: [],
      groupedRecords: {},
      isOpen: {}, // 控制每个供应商的展开与折叠
      animationData: {} // 动画数据
    };
  },
  mounted() {
    this.fetchInventoryRecords();
  },
  methods: {
    // 获取入库记录数据
    async fetchInventoryRecords() {
      try {
		  let token = uni.getStorageSync('token');
        const res = await uni.request({
          url: this.$C.api_url + 'api/minInventory/storageList',
          method: 'GET',
		  header:{
			  'satoken':token
		  },
        });
        if (res[1].data.code === 200) {
          this.inventoryRecords = res[1].data.data;
          this.groupRecordsBySupplier();
        }
      } catch (error) {
        console.error('获取库存记录失败', error);
      }
    },
    // 根据供应商分组库存记录
    groupRecordsBySupplier() {
      this.groupedRecords = this.inventoryRecords.reduce((acc, record) => {
        if (!acc[record.supplierName]) {
          acc[record.supplierName] = [];
          this.$set(this.isOpen, record.supplierName, false);
          this.$set(this.animationData, record.supplierName, {
            opacity: 0,
            height: 0,
            duration: 0
          });
        }
        acc[record.supplierName].push(record);
        return acc;
      }, {});
    },
    // 切换供应商记录的显示状态
    toggleSupplier(supplierName) {
      const isOpen = this.isOpen[supplierName];
      // 切换展开/折叠状态
      this.$set(this.isOpen, supplierName, !isOpen);
      this.$nextTick(() => {
        // 创建动画
        const animation = uni.createAnimation({
          duration: 300,
          timingFunction: 'ease'
        }) ;
        // 设置展开/收起动画
        if (!isOpen) {
          animation.opacity(1).height('auto').step();
        } else {
          animation.opacity(0).height(0).step();
        }
        // 更新动画数据
        this.$set(this.animationData, supplierName, animation.export());
      });
    },
    // 格式化时间
    formatDate(dateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
      return new Date(dateString).toLocaleDateString('zh-CN', options);
    }
  }
};
</script>

<style scoped>
.inventory-container {
  padding: 20rpx;
  background-color: #f0f4f8; /* 更柔和的背景色 */
}

.inventory-list {
  display: flex;
  flex-direction: column;
}

.no-records {
  text-align: center;
  color: #999;
  font-size: 30rpx;
  margin-top: 50rpx;
  font-style: italic;
}

.supplier-group {
  margin-bottom: 20rpx;
}

.supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx; /* 增加点击区域 */
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background-color 0.3s;
}

.supplier-header:hover {
  background-color: #e0e0e0; /* 增加视觉反馈 */
}

.supplier-name {
  font-weight: bold;
  color: #2c3e50;
  font-size: 34rpx;
}

.toggle-icon {
  font-size: 34rpx;
  color: #2980b9;
}

.supplier-records {
  margin-top: 10rpx;
}

.inventory-item {
  padding: 20rpx;
  margin-bottom: 10rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.inventory-item:hover {
  transform: translateY(-2rpx);
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  border-bottom: 1rpx solid #dcdcdc;
  padding-bottom: 10rpx;
}

.warehouse-name {
  font-weight: bold;
  color: #2c3e50;
  font-size: 32rpx;
}

.item-body {
  display: flex;
  flex-direction: column;
  padding-top: 10rpx;
}

.record-type,
.quantity,
.operator,
.remark,
.create-time {
  margin-bottom: 5rpx;
  color: #34495e;
  font-size: 30rpx;
}

.record-type {
  font-weight: bold;
  color: #2980b9;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
